<script setup lang="ts">

import ActivityTable from "./widgets/ActivityTable.vue";
import PrizeTable from "./widgets/PrizeTable.vue";
import {Activity, ActivityStatus, Prize} from "./types";
import { useListPage } from "./composables/useListPage";
import { ref } from "vue";
import EditActivityForm from "./widgets/EditActivityForm.vue";
import EditPrizeForm from "./widgets/EditPrizeForm.vue";

const { dataList, isLoading, sorting, pagination, createActivity, recruiting, activeActivity, createPrize } = useListPage()

const activityToEdit = ref<Activity | null>(null)
const prizeToEdit = ref<Prize | null>(null)
const doShowActivityFormModal = ref(false)
const doShowPrizeFormModal = ref(false)
const doShowEditPrizeFormModal = ref(false)
const prizePage = ref<Prize[]>([])
const prizeView = ref(false)
const itemActivityStatus = ref<ActivityStatus | null>()

const edit = (activity: Activity) => {
  console.log(activity.lotteryPrizes);
  prizePage.value = activity.lotteryPrizes as Prize[];
  doShowPrizeFormModal.value = true;
  prizeView.value = false;
  itemActivityStatus.value = activity.status;
  activityToEdit.value = activity;
}

const view = (activity: Activity) => {
  console.log(activity.lotteryPrizes);
  prizePage.value = activity.lotteryPrizes as Prize[];
  doShowPrizeFormModal.value = true;
  prizeView.value = true;
  itemActivityStatus.value = activity.status;
}

const editPrize = (prize: Prize) => {
  console.log(prize);
}

const onDeleted = async (activity: Activity) => {

}
const onPrizeDeleted = async (prize: Prize) => {

}

const createNewActivity = () => {
  activityToEdit.value = null
  doShowActivityFormModal.value = true
}

const beforeEditFormModalClose = async (hide: () => unknown) => {
    hide()
}

const onActivitySaved = async (project: Activity) => {
  doShowActivityFormModal.value = false
  if ('id' in project) {
    // update
  } else {
    // add
    await createActivity(project as Activity);
  }
}

const createNewPrize = (activity: Activity | null) => {
  doShowEditPrizeFormModal.value = true
  activityToEdit.value = activity;
}

const onPrizeSaved = async (prize: Prize) => {
  doShowPrizeFormModal.value = false
  prize.activityId = activityToEdit.value?.id
  if ('id' in prize) {
    // update
  } else {
    // add
    await createPrize(prize);
  }
}

const onRecruiting = async (project: Activity | null)  =>{
  doShowActivityFormModal.value = false
  if (project != null && project?.lotteryPrizes != null && project?.lotteryPrizes.length > 0 && 'id' in project) {
    await recruiting(project as Activity);
  }
}
const onActive = async (project: Activity | null)  =>{
  doShowActivityFormModal.value = false
  if (project != null && 'id' in project) {
    await activeActivity(project as Activity);
  }
}
</script>

<template>
  <h1 class="page-title">Activity List</h1>
  <VaCard>
    <VaCardContent>
      <div class="flex flex-col md:flex-row gap-2 mb-2 justify-between">
        <div class="flex flex-col md:flex-row gap-2 justify-start">
        </div>
        <VaButton icon="add" @click="createNewActivity">Activity</VaButton>
      </div>
      <ActivityTable
        :dataList="dataList"
        :loading="isLoading"
        :sort-by="sorting.sortBy"
        :sorting-order="sorting.sortingOrder"
        :pagination="pagination"
        @edit="edit"
        @view="view"
        @delete="onDeleted"
      />
    </VaCardContent>

    <VaModal
      v-slot="{ cancel, ok }"
      v-model="doShowActivityFormModal"
      size="small"
      mobile-fullscreen
      close-button
      stateful
      hide-default-actions
      :before-cancel="beforeEditFormModalClose"
    >
      <h1 class="va-h5 mb-4">Add activity</h1>
      <EditActivityForm
        ref="editFormRef"
        :activity="activityToEdit"
        :save-button-label="activityToEdit === null ? 'Add' : 'Save'"
        @close="cancel"
        @save="
          (activity) => {
            onActivitySaved(activity)
            ok()
          }
        "
      />
    </VaModal>

    <VaModal
      v-slot="{ cancel, ok }"
      v-model="doShowEditPrizeFormModal"
      size="small"
      mobile-fullscreen
      close-button
      stateful
      hide-default-actions
      :before-cancel="beforeEditFormModalClose"
    >
      <h1 class="va-h5 mb-4">Add Prize</h1>
      <EditPrizeForm
        ref="editPrizeFormRef"
        :prize="prizeToEdit"
        :save-button-label="prizeToEdit === null ? 'Add' : 'Save'"
        @close="cancel"
        @save="(prize) => {
            onPrizeSaved(prize)
            ok()
          }
        "
      />
    </VaModal>

    <VaModal
      v-slot="{ cancel, ok }"
      v-model="doShowPrizeFormModal"
      size="large"
      mobile-fullscreen
      close-button
      stateful
      hide-default-actions
      :before-cancel="beforeEditFormModalClose"
    >
      <h1 class="va-h5 mb-4">Prize</h1>
      <div class="flex flex-col md:flex-row gap-2 mb-2">
        <VaButton v-if="itemActivityStatus==='unpublished'" icon="edit" @click="onRecruiting(activityToEdit)">recruiting</VaButton>
        <VaButton v-if="itemActivityStatus==='recruiting'" icon="edit" @click="onActive(activityToEdit)">active</VaButton>
        <VaButton v-if="!prizeView" icon="add" @click="createNewPrize(activityToEdit)">Prize</VaButton>
      </div>
      <PrizeTable
        :dataList="prizePage"
        :loading="isLoading"
        :sort-by="sorting.sortBy"
        :sorting-order="sorting.sortingOrder"
        :pagination="pagination"
        :prizeView="prizeView"
        @edit="editPrize"
        @delete="onPrizeDeleted"
      />
    </VaModal>



  </VaCard>
</template>

<style scoped lang="scss">

</style>
